<template>
  <div id="app">
    <h2 class="text-center">Vue2中常见的富文本编辑器</h2>
    <nav class="text-center">
      <router-link to="/">Vue-Quill-Editor</router-link> |
      <router-link to="/wangEditor">WangEditor</router-link> |
      <router-link to="/markdown">Markdown</router-link> |
      <router-link to="/jsonToExcel">JsonToExcel</router-link>|
      <router-link to="/jsonToCsv">jsonToCsv(papaparse)</router-link>|
      <router-link to="/jsonToCsv2">jsonToCsv</router-link>
    </nav>
    <!--路由出口（点击菜单后路由路径对应的组件在这个出口内呈现）-->
    <router-view class="container"/>
  </div>
</template>

<!--引入样式1：<style src="@wangeditor/editor/dist/css/style.css"></style>-->
<style>
  /*@符号表示引用相对于项目根目录的路径。它是Vue CLI中使用的别名，用于指向项目的根目录。*/
  /*引入样式2： @import "@wangeditor/editor/dist/css/style.css";*/

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
  .text-center {
    text-align: center;
  }
  .container {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
  }
  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
  .btn {
    border: none;
    padding: 8px 15px;
    margin-top: 8px;
    border-radius: 3px;
  }

  .btn:hover {
    background: #333;
    color: #fff;
    transition: background 1s, color 1s;
  }
</style>
